<template>
  <div class="nav">
    <div class="nav_header">
      <div class="nav_header_container">
          <!-- 指向 -->
          <div class="nav_header_left">
            <a href="javascript:;">新品</a>
            <a href="javascript:;">探索</a>
            <a href="javascript:;">云服务</a>
            <a href="javascript:;">协议规则</a>
          </div>
          <!-- 登录注册 -->
          <div class="nav_header_right">
            <div v-show="!isLogin">
              <router-link to="/Login">登录</router-link>
              <router-link to="/Register">注册</router-link>
              <a>
                <span class="icon_cart"></span>购物车
              </a>
            </div>
            <div v-show="isLogin">
              <router-link to="/Login">{{username}}</router-link>
              <a @click="loginOut">退出</a>
              <a @click="toOrder">我的订单</a>
              <a @click="toCart">
                <span class="icon_cart"></span>购物车({{cartCount}})
              </a>
            </div>
          </div>
      </div>
    </div>
    <div class="nav_container">
      <!-- logo -->
      <div class="logo" @click="toHome">
        <a class="logo_img" href="javascript:;" title="雷蛇"></a>
      </div>
      <!-- nav分类 -->
      <div class="nav_mune">
        <div class="mune_item" v-for="(item,index) in sideItems" :key="index" @mouseenter="addActive(item.classify_id)" @mouseleave="removeActive()">
          <span>{{item.content}}</span>
          <div class="children" >
            <ul>
              <li class="product" v-for="(item,index) in classifyGoods" :key="index">
                <div @click="toDetail(item)">
                  <div class="pro_img">
                    <img :src="item.s_photos[0].path" alt="">
                  </div>
                  <div class="pro_name">{{item.name}}</div>
                </div>
              </li>
            </ul>
          </div>
        </div>

      </div>
      <!-- 搜索 -->
      <div class="search">
        <div>
          <input type="text">
        </div>
        <a href="javascript:;"></a>
      </div>
    </div>

  </div>
</template>

<script>
import {Data,get} from '../assets/js/request'
import api from "../assets/js/api"
import http from "../assets/js/http"
export default {
  data(){
    return {
      sideItems: [],
      classifyGoods:[],
      obj:{},
    }
  },
  async created(){
      if(sessionStorage.getItem('token')){
        this.getCartCount()
      }
      //获取商品列表
      let classify = await Data('get','classify',{project_id:41})
      let Goods = []
      classify.map( async (ele,index) => {
          //添加所有分类进sideItems
          this.sideItems.push({id:index,content:ele.name,classify_id:ele.id})
      })
  },

  computed:{
    isLogin(){
      return this.$store.getters.isLogin
    },
    username(){
      return this.$store.getters.userName
    },
    cartCount(){
      return this.$store.state.cartCount
    }
  },
  methods:{
      //移入
      //通过存储数据，避免多次请求
      async addActive(Type){
        //判断缓存种是否有对应的数据，有就直接用，没有就请求
        if(Object.keys(this.obj).includes(Type)){
          this.arr = this.obj[Type]
        }else{
          let res = await Data('get','productList',{classify_id:Type,project_id:41})
          this.classifyGoods = res.rows.splice(0,6)
          this.obj[Type] = res.rows
        }
        this.goodStatus = true
      },
      //移出
      removeActive(){
        this.goodStatus = false
      },
      //退出
      async loginOut(){
        // let res =  await Data('post','logout')
        // sessionStorage.clear()
        this.$store.commit("changeLogin",false)
      },
      //获取购物车长度
      async getCartCount(){
        let res = await Data('get','cart')
        this.$store.dispatch('saveCartCount',res.length);
        sessionStorage.setItem('cartCount',res.length)
      },
      //去详情页面
      toDetail(val){
        // console.log(val,"val");
        this.$router.push({name:'ShopShow',params:{id:val.id}})
          // this.$router.push({name:'product',params:{id:val}})
      },
      //去购物车
      toCart(){
        this.$router.push('/cart')
      },
      //去首页
      toHome(){
        window.location.href= '/'
      },
      //去订单页面
      toOrder(){
        this.$router.push('/order/orderList')
      }
  },
  
}
</script>

<style lang="scss" scoped>
@import '../assets/css/mixin.scss';

.nav{
  .nav_header{
    background-color: #333333;
    width: 100%;
    .nav_header_container{
      @include flex();
      width: 75%;
      margin: 0 auto;
      line-height: 39px;
      .nav_header_left{
        a{
          color: #b0b0b0;
          display: inline-block;
          margin-left: 15px;
          &:first-child{
            margin-left: 0px;
          }
        }
      }
      .nav_header_right{
        a{
          color: #b0b0b0;
          display: inline-block;
          margin-left: 15px;
          text-align: center;
          cursor: pointer;
          .icon_cart{
            @include bgImg(16px,12px,'../../public/img/icon-cart.png',contain);
            margin-right: 4px;
          }
          &:last-child{
            width: 100px;
            background-color: #FF6600;
          }
        }
      }
    }
  }  
  .nav_container{
    width: 1226px;
    height: 112px;
    margin: 0 auto;
    position: relative;
    z-index: 30;
    @include flex();
    .logo{
      overflow: hidden;
      width: 55px;
      .logo_img{
        display: block;
        width: 110px;
        height: 55px;
        background-color:black;
        &::before{
          @include bgImg(55px,55px,'../../public/img/logo.png',55px);
          transition: all .3s;         
        }
        &::after{ 
          @include bgImg(55px,55px,'../../public/img/mi-home.png',55px);      
        }
        &:hover::before{
            margin-left: -55px;
            transition: all .3s;    
        }
        
      }
    }
    .nav_mune{
      width: 552px;
      .mune_item{
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        line-height: 112px;
        margin-right: 20px;
        color: white;
        span{
          cursor: pointer;
        }
        &:hover{
            color: #FF6600;
            .children{
              height: 200px;
              opacity: 1;
            }
          }
        .children{
          width: 1231px;
          height: 0px;
          position:absolute;
          top: 112px;
          left: 0;
          font-size: 12px;
          line-height: 12px;
          text-align: center;
          box-shadow: 0 7px 6px 0 rgba(0,0,0,.11);
          opacity: .5;
          overflow: hidden;
          transition: all 1s;
          z-index: 10;
          background-color: black;
          ul{
            
            display: flex;
            .product{
              // background-color: black;
              width: 16.6%;
              height: 200px;
              // background-color: #ffffff;
              position: relative;
              img{
                width: auto;
                height: 100px;
                margin-top: 20px;
              }
              .pro_name{
                font-weight: bold;
                margin-top: 20px;
                margin-bottom: 20px;
                color: white;
              }
              .pro_price{
                color: red;
              }
              &::before{
                position: absolute;
                right: 0px;
                top: 28px;
                content: '';
                width: 1px;
                height: 100px;
                background-color: #d7d7d7;
              }
              &:last-child::before{
                display: none;
              }
            }
          }
        }
      }
    }
    .search{
      width: 325px;
      border: 1px solid #E0E0E0;
      height: 52px;
      display: flex;
      input{
        width: 264px;
        height: 50px;
        border: 1px solid #E0E0E0;
        padding-left: 4px;
      }
      a{
        @include bgImg(55px,50px,'../../public/img/icon-search.png',18px);
      }
    }
  }
}

</style>